
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Field Life Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>


<!-- //js -->
<!-- fonts -->
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- //fonts -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.html">
				<span>F</span>IELD LIFE
			</a>
		</div>
		<div class="social-icons">
			<ul>
				<li><a class="facebook" href="#"></a></li>
				<li><a class="twitt" href="#"></a></li>
				<li><a class="link" href="#"></a></li>
				<li><a class="googl" href="#"></a></li>
				<li><a class="dribb" href="#"></a></li>
			</ul>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //header -->
<!-- navigation -->
<div class="navigation">
	<div class="container">
		<nav class="navbar navbar-default">
		 
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
				  <ul class="nav navbar-nav">
					<li class="hvr-bounce-to-bottom"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
					<li class="hvr-bounce-to-bottom active"><a href="about.html">ABOUT</a></li>
					<li class="hvr-bounce-to-bottom"><a href="typography.html">Services</a></li>
					<li class="hvr-bounce-to-bottom"><a href="gallery.html">GALLERY</a></li>
					<li class="hvr-bounce-to-bottom "><a href="contact.html">Contact Us</a></li>
				  </ul>
				<div class="search">
					<form>
						<input type="search" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}" required="">
						<input type="submit" value=" ">
					</form>
				</div>
			  <div class="clearfix"></div>
			</div><!-- /.navbar-collapse -->
		</nav>
	</div>
</div>
<!-- //navigation -->

<!-- banner -->
<div class="banner page-head">
	<div class="container">
		<h3>ABOUT</h3>
	</div>
</div>
<!-- about -->
<!-- about-page -->
<div class="about-page">
	<div class="container">
		<div class="about-grids">	
			<div class="col-md-5 about-grid">
				<img src="images/g4.jpg" alt=""/>
			</div>
			<div class="col-md-7 about-grid">
				<h4>A FEW WORDS ABOUT US</h4>
				<p> Neque porro quisquam est, qui dolorem ipsum 
				quia dolor sit amet, consectetur, adipisci velit, 
				sed quia non numquam eius modi tempora incidunt ut 
				labore et dolore magnam aliquam quaerat voluptatem. 
				Ut enim ad minima veniam, quis nostrum exercitationem 
				ullam corporis suscipit laboriosam, nisi ut aliquid 
				ex ea comm.</p>
				<p>Temporibus autem quibusdam et aut officiis debitis aut rerum 
			necessitatibus saepe eveniet ut et voluptates repudiandae sint et 
			molestiae non recusandae. Itaque earum rerum veniam, quis nostrum exercitationem 
				ullam corporis suscipit minima veniam, quis nostrum laboriosam, nisi ut aliquid 
				ex ea commodi consequatu Itaque earum.</p>
			</div>
			
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- test -->
<div class="testimonial">
	<div class="container">
		<!-- responsiveslides -->
							<script src="js/responsiveslides.min.js"></script>
								<script>
									// You can also use "$(window).load(function() {"
									$(function () {
									 // Slideshow 4
									$("#slider4").responsiveSlides({
										auto: true,
										pager: false,
										nav: false,
										speed: 500,
										namespace: "callbacks",
										before: function () {
									$('.events').append("<li>before event fired.</li>");
									},
									after: function () {
										$('.events').append("<li>after event fired.</li>");
										}
										});
										});
								</script>
		<!-- responsiveslides -->
		<div  id="top" class="callbacks_container">
			<ul class="rslides" id="slider4">
				<li>
					<div class="testm-info">
						<h3>TESTIMONIAL</h3>
						<p>Temporibus autem quibusdam et aut officiis debitis aut rerum 
							necessitatibus saepe eveniet ut et voluptates repudiandae sint et 
							molestiae non recusandae. Itaque earum rerum veniam, quis nostrum exercitationem 
								ullam corporis suscipit laboriosam, nisi ut aliquid 
								ex ea commodi consequatu.</p>
								<img src="images/6.jpg" alt=""/>
						<h4>JOHN DOE <span>Client</span></h4>
					</div>
				</li>
				<li>
					<div class="testm-info">
						<h3>TESTIMONIAL</h3>
						<p>Temporibus autem quibusdam et aut officiis debitis aut rerum 
							necessitatibus saepe eveniet ut et voluptates repudiandae sint et 
							molestiae non recusandae. Itaque earum rerum veniam, quis nostrum exercitationem 
								ullam corporis suscipit laboriosam, nisi ut aliquid 
								ex ea commodi consequatu.</p>
								<img src="images/7.jpg" alt=""/>
						<h4>WILSON <span>Client</span></h4>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<!-- //test -->
<div class="team">
	<div class="container">
		<div class="team-info">
			<h3>OUR RESEARCHES</h3>
		</div>
		<!-- flex-slider -->
			<div class="work-bottom">
							<ul id="flexiselDemo1">			
								<li>
									<div class="team-left">
										<img src="images/team-1.jpg" alt=""/>
										<div class="team-bottom">
											<h4>ALAN SMITH</h4>
											<p>Fusce et nibh eget odio cursus consectetur</p>
										</div>
									</div>
								</li>
								<li>
									<div class="team-left">
										<img src="images/team-3.jpg" alt=""/>
										<div class="team-bottom">
											<h4>CAROL ADAMS</h4>
											<p>Fusce et nibh eget odio cursus consectetur</p>
										</div>
									</div>
								</li>
								<li>
									<div class="team-left">
										<img src="images/team-2.jpg" alt=""/>
										<div class="team-bottom">
											<h4>MARK SIMMY</h4>
											<p>Fusce et nibh eget odio cursus consectetur</p>
										</div>
									</div>
								</li>
								<li>
									<div class="team-left">
										<img src="images/team-4.jpg" alt=""/>
										<div class="team-bottom">
											<h4>WILLIAM</h4>
											<p>Fusce et nibh eget odio cursus consectetur</p>
										</div>
									</div>
								</li>
							</ul>
								<script type="text/javascript">
										$(window).load(function() {
											$("#flexiselDemo1").flexisel({
												visibleItems: 4,
												animationSpeed: 1000,
												autoPlay: true,
												autoPlaySpeed: 3000,    		
												pauseOnHover: true,
												enableResponsiveBreakpoints: true,
												responsiveBreakpoints: { 
													portrait: { 
														changePoint:480,
														visibleItems: 1
													}, 
													landscape: { 
														changePoint:640,
														visibleItems: 2
													},
													tablet: { 
														changePoint:768,
														visibleItems: 3
													}
												}
											});
											
										});
								</script>
								<script type="text/javascript" src="js/jquery.flexisel.js"></script>
				
			</div>
		<!-- //flex-slider -->	
	</div>
</div>

<!-- //about-page -->
<!-- footer -->
<div class="footer">
	<div class="container">
		<div class="footer-grids">
			<div class="logo2">
				 <a href="index.html"><span>F</span>IELD LIFE</a>
			</div>
			<div class="ftr-menu">
				 <ul>
					<li><a href="index.html">HOME </a></li>
					<li><a href="about.html">ABOUT</a></li>
					<li><a href="typography.html">SERVICES</a></li>
					<li><a href="gallery.html">GALLERY</a></li>
					<li><a href="contact.html">CONTACT US</a></li>
				 </ul>
			</div>
			<div class="clearfix"></div>
		</div>

	</div>
</div>
<div class="copy-right">
	<div class="container">
			<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
</div>
<!---->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
<!-- //footer -->
<!-- for bootstrap working -->
		<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
</body>
</html>